<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        标准文档流

        微观现象
            空白折叠现象
            文字类元素  高低不齐 底边对齐
            自动换行 写满元素的width会自动换行

        元素等级
            块级元素  div  h1
                可以设置宽高 正常加载 独占一行 不设置宽度会撑满父级的width区域

            行内元素  span a b
                没有办法正常加载宽度 高度 可以水平排程一排 只能被内容撑开

            行内块元素 img input
                可以设置宽高  可以并行展开 不设置宽高会把元素真实宽高展示出来 复合微观现象
    -->
    <div>
        <a href="">超级链接</a>
        <span>文本</span>
        <input type="text">

    </div>
</body>
</html>